﻿<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="Bookmark" href="favicon.ico">
    <link rel="Shortcut Icon" href="favicon.ico"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="lib/html5.js"></script>
    <script type="text/javascript" src="lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css"/>
    <!--[if IE 6]>
    <script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <!--/meta 作为公共模版分离出去-->

    <title>管理员列表 - 管理员列表</title>
    <style>
        .ff, .qx {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 100;
            background-color: rgba(10, 10, 10, .4);
            display: none;
        }

        .ff form{
            width: 540px;
            height: 200px;
            background: #fff;
            margin: 100px auto 0;
            padding: 50px 20px 20px;
            border-radius: 6px;
        }

        .formControls {
            padding-right: 50px;
        }

        .close, .close_qx {
            width: 30px;
            height: 30px;
            font-size: 20px;
            line-height: 30px;
            position: absolute;
            right: 5px;
            top: 5px;
            text-align: center;
            cursor: pointer;
        }
        .close_qx{
            right: -10px;
            top: 0px;
        }
        .edit{
            display: none;
        }

        .qxList {
            width: 100%;
            height: 240px;
            list-style: none;
            background-color: #fff;
            border: 1px solid #e3e3e3;
            border-bottom-left-radius: 4px;
            border-bottom-right-radius: 4px;
            z-index: 2;
            overflow-y: auto;
            margin-top: 20px;
        }

        .qxItem {
            width: calc(50% - 20px);
            height: 30px;
            line-height: 30px;
            margin: 0 10px;
            cursor: pointer;
            float: left;
            -ms-text-overflow: ellipsis;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
        .qxItem:hover {
            background-color: #e3e3e3;
        }
        .qxContent {
            width: 500px;
            height: 340px;
            margin: 80px auto 0;
            background: #fff;
            position: relative;
            padding: 20px;
        }

        .qx h2 {
            width: 100%;
            height: 30px;
            line-height: 30px;
            position: relative;
            text-align: left;
            padding: 0;
        }
        .btnBox{
            width: 100%;
            height: 34px;
            line-height: 34px;
            text-align: center;
            margin-top: 20px;
        }
        .line{
            width:2px;
            height:calc(100% - 10px);
            background: #e3e3e3;
            position: absolute;
            left:calc(50% - 1px);
            top: 5px;
        }
        .qxName{
            padding-left: 10px;

        }
    </style>
<body>

<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页
    <span class="c-gray en">&gt;</span>
    管理员管理
    <span class="c-gray en">&gt;</span>
    角色管理 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px"
            href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a>
</nav>
<div class="Hui-article">
    <article class="cl pd-20">
        <div class="cl pd-5 bg-1 bk-gray mt-20">
            <span class="l"><a href="javascript:;" onclick="admin_add()" class="btn btn-primary radius"><i
                    class="Hui-iconfont">&#xe600;</i> 添加角色</a> </span>
            <span class="r">共有数据：<strong id="totalCount">0</strong> 条</span>
        </div>
        <table class="table table-border table-bordered table-bg" style="margin-top:20px;">
            <thead>
            <tr>
                <th scope="col" colspan="9">员工列表</th>
            </tr>
            <tr class="text-c">
                <th width="40">ID</th>
                <th width="150">角色名</th>
                <th width="90">类型</th>
                <th width="100">操作</th>
            </tr>
            </thead>
            <tbody id="listContent">

            </tbody>
        </table>
        <div class="row cl">
            <div class="col-xs-4 col-sm-3 text-l" style="margin-top: 30px;height:30px;line-height: 30px;">
                当前：第 <span id="nowPage">1</span> 页 / 总：<span id="totalPages"></span> 页
            </div>
            <div class="col-xs-8 col-sm-9 text-r" style="margin-top: 30px;">
                <input class="btn btn-default-outline radius" type="button" id="previous"
                       value="&nbsp;&nbsp;上一页&nbsp;&nbsp;">
                <input class="btn btn-primary radius" type="button" id="next" value="&nbsp;&nbsp;下一页&nbsp;&nbsp;">
            </div>
        </div>
    </article>
</div>

<article class="cl pd-20 ff">
    <form action="" method="post" class="form form-horizontal" id="form-admin-add" style="position: relative;">
        <div class="close">X</div>
        <div class="row cl">
            <label class="form-label col-xs-3 col-sm-2"><span class="c-red">*</span>角色名：</label>
            <div class="formControls col-xs-9 col-sm-10">
                <input type="text" class="input-text" placeholder="请输入角色名称" id="adminName" name="adminName">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-3 col-sm-2">类型：</label>
            <div class="formControls col-xs-9 col-sm-10"> <span class="select-box" style="width:150px;">
				<select class="select" name="adminRole" size="1" id="adminRole">
					<option value="0">开发人员</option>
					<option value="1">网站管理员</option>
					<option value="2">网站运维人员</option>
					<option value="3">网站普通人员</option>
				</select>
				</span></div>
        </div>
        <div class="row cl">
            <div class="col-xs-9 col-sm-10 col-xs-offset-3 col-sm-offset-2">
                <input class="btn btn-primary radius add" type="button" value="&nbsp;&nbsp;提交&nbsp;&nbsp;"
                       id="add_admin">
                <input class="btn btn-primary radius edit" type="button" value="&nbsp;&nbsp;确认修改&nbsp;&nbsp;"
                       id="edit_role">
            </div>
        </div>
    </form>
</article>
<article class="cl pd-20 qx">
    <div class="qxContent">
        <h2>权限列表：
            <div class="close_qx">X</div>
        </h2>
        <div style="position: relative;">
            <ul class="qxList">

            </ul>
            <div class="line"></div>
        </div>

        <div class="btnBox">
            <input class="btn btn-primary radius edit_qx" type="button" value="&nbsp;&nbsp;确认修改&nbsp;&nbsp;" id="edit_qx">
        </div>

    </div>
</article>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.page.js"></script>
<!--/_footer /作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<!--<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>-->
<script type="text/javascript" src="lib/common.js"></script>
<script type="text/javascript">
    var a_url = url + "/manager/role/list";
    $(function () {
        $.post(a_url, {pageSize: pageSize, pgeNum: pageNum}).success(function (res) {
            if (res) {
                totalCount = res.total;
                $("#totalCount").html(totalCount);
                $("#totalPages").html(Math.ceil(totalCount / pageSize));
                var data = res.list;
                var str = "";
                for (var i = 0; i < data.length; i++) {
                    str += add_addmin(data[i].id, data[i].name, data[i].type);
                    list.push(data[i]);
                }
                $("#listContent").html(str);
            }
        }).error(function (err) {
            alert("获取数据失败");
        });
        //获取权限总表
        getQxList();
    });
    function add_addmin(id, name, type) {
        return ' <tr class="text-c">' +
            '<td>' + id + '</td> <td>' + name + '</td> <td>' + typeList[type] + '</td> ' +
            '<td class="td-manage"><a title="编辑" onclick="edit_admin(this,event)" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">&#xe6df;</i>修改类型</a> ' +
            '</td> </tr>'
    }
    //添加角色
    function admin_add() {
        $(".add").show();
        $(".edit").hide();
        $(".ff").fadeIn();
    }
    $("#add_admin").click(function () {
        var obj = {
            name: $("#adminName").val(),
            type: $("#adminRole").val()
        }
        if (obj == "") {
            alert("角色名称不能为空");
        } else {
            $.post(url + "/manager/role/add", {name: obj.name, type: obj.type}).success(function (res) {
                if (res.status == 1) {
                    $(".ff").fadeOut();
                    location.reload();
                    alert("添加成功");
                } else if (res.status == 2) {
                    alert("角色名称重复了");
                } else {
                    $(".ff").fadeOut();
                    alert("添加失败");
                }
            }).error(function (err) {
                $(".ff").fadeOut();
                alert("添加错误");
            })

        }
    });
    function add_success(id, name, type) {
        var str = add_addmin(id, name, type);
        $("#listContent").append(str);
    }
    //编辑角色
    var edit_id, edit_index;
    function edit_admin(that,event) {
        var e = event || window.event;
        e.stopPropagation();
        e.preventDefault();
        $(".add").hide();
        $(".edit").show();
        $(".ff").fadeIn();
        edit_id = $(that).parents("tr").children("td").eq(0).html();
        for (var i = 0; i < list.length; i++) {
            if (list[i].id == edit_id) {
                edit_index = i;
                $("#adminName").val(list[i].name);
                $("#adminRole").val(list[i].type);
                break;
            }
        }
    }
    //确认修改
    $("#edit_role").click(function () {
        var obj = {
            name: $("#adminName").val(),
            type: $("#adminRole").val()
        };
        if (obj == "") {
            alert("角色名称不能为空");
        } else {
            $.post(url + "/manager/role/update", {id: edit_id, name: obj.name, type: obj.type}).success(function (res) {
                if (res.status == 1) {
                    //本地数据还未修改
                    $(".ff").fadeOut();
                    var td = $("#listContent tr").eq(edit_index).children("td");
                    td.eq(1).html(obj.name);
                    td.eq(2).html(typeList[obj.type]);
                    alert("修改成功");
                } else if (res.status == 2) {
                    alert("角色名称重复了");
                } else {
                    $(".ff").fadeOut();
                    alert("添加失败");
                }
            }).error(function (err) {
                $(".ff").fadeOut();
                alert("添加错误");
            })
        }
    });
    //上一页
    $("#previous").click(function () {
        if (nowPage == 1) {
            alert("再往前就没有了");
        } else {
            nowPage--;
            var str = "";
            for (var s = (nowPage - 1) * pageSize; s < nowPage * pageSize; s++) {
                str += add_addmin(list[i].id, list[i].name, list[i].type);
            }
            $("#listContent").html(str);
            $("#nowPage").html(nowPage);
        }
    });
    //下一页
    $("#next").click(function () {
        var p = nowPage * pageSize;
        if (p >= totalCount) {
            alert("再往后就没有了");
        } else if (p < list.length) {
            nowPage++;
            var str = "";
            for (var s = (nowPage - 1) * pageSize; s < list.length; s++) {
                str += add_addmin(list[i].id, list[i].name, list[i].type);
            }
            $("#listContent").html(str);
            $("#nowPage").html(nowPage);
        } else {
            nowPage++;
            $.post(r_url, {pageSize: pageSize, pgeNum: nowPage}).success(function (res) {
                var str = "";
                var data = res.list;
                for (var i = 0; i < data.length; i++) {
                    str += add_addmin(data[i].id, data[i].name, data[i].type);
                    list.push(data[i]);
                }
                $("#listContent").html(str);
                $("#nowPage").html(nowPage);
            }).error(function () {
                alert("获取数据失败");
            });
        }
    });
    //对角色权限的操作
    var isGet = false;
    var qxList = [];
    var rid;
    var isGetQx = false;
    function getQxList() {
        $.post(url + "/manager/permission/listNoPage").success(function (res) {
            if (res) {
                qxList = res.reList;
                var str = "";
                for (var i = 0; i < qxList.length; i++) {
                    str += '<li class="qxItem" data-t="'+ qxList[i].id +'" title="'+ qxList[i].name +'"><input type="checkbox" class="cinps" autocomplete="off"><span class="qxName">'+ qxList[i].name +'</span></li>';
                }
                $(".qxList").html(str);
            }
            isGetQx = true;
        }).error(function (err) {
            alert("获取权限列表失败");
        })
    }
    $("#listContent").on("click", "tr", function () {
        $(".cinps").prop("checked",false);
        pidList = [];
        if (!isGet) {
            isGet = true;
            if (!isGetQx) {
                getQxList();
            }
            rid = $(this).children("td").eq(0).html();
            $.post(url + "/manager/role/permissionsByRidNoPage",{rid:rid}).success(function (res) {
                $(".qx").fadeIn();
                if (res != "") {
                    for(var j = 0;j < res.reList.length;j++){
                        var id = res.reList[j].id;
                        pidList.push(id);
                        for(var x = 0;x < qxList.length;x++){
                            if(qxList[x].id == id){
                                $(".cinps").eq(x).prop("checked","checked");
                                break;
                            }
                        }
                    }
                }
            }).error(function () {
                isGet = false;
            }).complete(function () {
                isGet = false;
            })
        }
    });
    $(".close_qx").click(function () {
        $(".qx").fadeOut();
        isGet = false;
    });
    var pidList = [];//暂时保存已经存在和选中的权限
    $(".qxList").on("click", ".qxItem", function () {
        var index = $(this).index(".qxItem");
        var check = $(this).children("input");
        var check_f = check.prop("checked");
        var id = qxList[index].id;
        if(check_f){ //取消该项权限
           for(var q = 0;q < pidList.length;q++){
               if(pidList[q] == id){
                   pidList.splice(q,1);
                   break;
               }
           }
        }else{  //增加该项权限
            pidList.push(id);
        }
        check.prop("checked",!check_f);
        console.log(pidList);
    });
    $(".qxList").on("click",".cinps",function(){
       var flag = $(this).prop("checked");
       $(this).prop("checked",!flag);
    });
    //修改角色权限
    $("#add_qx,#edit_qx").click(function () {
        if (pidList.length == 0) {
            if(confirm("确认不赋予该角色任何权限?")){
                upQx();
            }
        }else{
            if(confirm("确认修改该角色的权限？")){
                upQx();
            }
        }
    });
    function upQx(){
        $.post(url + "/manager/role/upPermissionsByRid", {rid: rid, pidstr: pidList.join(",")}).success(function (res) {
            if (res.status == 1) {
                alert("修改成功");
            } else {
                alert("修改失败");
            }
        }).error(function () {
            alert('修改失败');
        }).complete(function () {
            $(".qx").fadeOut();
        })
    }
</script>
</body>
</html>